import React, { Component } from 'react'
import { Carousel, Card } from 'antd-mobile'
import classnames from 'classnames'
import styles from './index.less'
interface Props {
    data: string[]
}
interface State {

}
/**
 * Card
 * Carousel
 *  autoplay
 *  infinite
 * 
 * img
 *  src
 *  alt
 *  onLoad
 *      window.dispatchEvent(new Event('resize'))
 * 
 */
export default class index extends Component<Props, State> {
    state = {}

    render() {
        const data = this.props.data
        console.log('data', data);
        /**
         * Card 可以调试好看的上下左右间距
         */
        return (
            <Card full>
                <Carousel
                    className={styles.main}
                    autoplay={true}
                    infinite
                >
                    {data.map((src, index) => (<a
                        className={classnames(styles.carouselItem, 'xyCenter')}
                        key={index}
                    >
                        <img
                            src={src}
                            alt='pic'
                            onLoad={() => window.dispatchEvent(new Event('resize'))}></img></a>))}
                </Carousel>
            </Card>
        )
    }
}
